<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Jason&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="人与人的悲欢并不相通，孤独是生命的本质。">
<meta property="og:type" content="website">
<meta property="og:title" content="Jason&#39;s Blog">
<meta property="og:url" content="https://xianguoji.gitee.io/myblog/index.html">
<meta property="og:site_name" content="Jason&#39;s Blog">
<meta property="og:description" content="人与人的悲欢并不相通，孤独是生命的本质。">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Jason">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/myblog/" title="Jason&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/myblog/css/style.css">

<meta name="generator" content="Hexo 5.0.2"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/myblog/" id="logo">人与人的悲欢并不相通，孤独是生命的本质。</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/myblog/" id="subtitle">欢迎来到我的个人网站</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/myblog/">Home</a>
        
          <a class="main-nav-link" href="/myblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/myblog/" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://xianguoji.gitee.io/myblog"></form>
      </div>
    </div>
  </div>
</header>
<style>
  #logo{
    text-shadow:0 0 5px #000;
    /* font-weight: bold; */
  }
  #subtitle-wrap{
    margin-top: 50px;
  }
</style>
      <div class="outer">
        <section id="main">
  
    <article id="post-2020-08-13个人简历" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/" class="article-date">
  <time datetime="2020-08-13T03:42:35.631Z" itemprop="datePublished">2020-08-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="个人简历"><a href="#个人简历" class="headerlink" title="个人简历"></a>个人简历</h2><h2 id="📞-联系方式"><a href="#📞-联系方式" class="headerlink" title="####📞 联系方式"></a>####📞 联系方式</h2><blockquote>
<p>邮箱: <a href="mailto:&#x33;&#x37;&#x35;&#x37;&#53;&#49;&#52;&#x35;&#x39;&#x40;&#113;&#113;&#46;&#x63;&#x6f;&#109;">&#x33;&#x37;&#x35;&#x37;&#53;&#49;&#52;&#x35;&#x39;&#x40;&#113;&#113;&#46;&#x63;&#x6f;&#109;</a><br>手机: (+86) 159-9206-4233<br>QQ: 375751459<br>微信: xianguoji618</p>
</blockquote>
<h2 id="🤵-个人信息"><a href="#🤵-个人信息" class="headerlink" title="####🤵 个人信息"></a>####🤵 个人信息</h2><blockquote>
<p>冼国基 / 男 / 1993 / 茂名<br>专科 / 清远职业技术学院 / 电子信息工程 / 2013-2016<br>Github: <a target="_blank" rel="noopener" href="https://github.com/xianguoji">https://github.com/xianguoji</a><br>技术博客: <a href="https://xianguoji.gitee.io/homeblog/">https://xianguoji.gitee.io/homeblog/</a><br>期望职位:  前端开发<br>职位类型: 全职<br>期望薪资：12k<br>期望城市：远程 / 广州</p>
</blockquote>
<h2 id="📃-技能清单"><a href="#📃-技能清单" class="headerlink" title="####📃 技能清单"></a>####📃 技能清单</h2><h5 id="前端"><a href="#前端" class="headerlink" title="前端:"></a>前端:</h5><blockquote>
<p>熟悉原生 Javascript，能脱离 jQuery 等类库开发，熟悉 ES6 规范。</p>
</blockquote>
<blockquote>
<p>了解 TypeScript 高级特性。</p>
</blockquote>
<blockquote>
<p>会利用 HTML/CSS 简单布局。</p>
</blockquote>
<blockquote>
<p>熟练使用 Vue 全家桶 构建前端项目。</p>
</blockquote>
<blockquote>
<p>了解和使用 React 及其生态构建前端项目。</p>
</blockquote>
<blockquote>
<p>熟悉 Chrome 控制台调试等功能。</p>
</blockquote>
<blockquote>
<p>熟悉前端各大脚手架: Webpack等。</p>
</blockquote>
<blockquote>
<p>了解可上手 Less、Stylus、Sass 等预处理器。</p>
</blockquote>
<blockquote>
<p>了解 PWA，Worker-Box 等渐进式移动应用。</p>
</blockquote>
<blockquote>
<p>可上手 Bootstrap / Echarts / Ants / ElementUI / iview 等UI框架。</p>
</blockquote>
<h5 id="后端"><a href="#后端" class="headerlink" title="后端:"></a>后端:</h5><blockquote>
<p>熟悉掌握 JavaScript 语言。</p>
</blockquote>
<blockquote>
<p>了解node.js语言。</p>
</blockquote>
<blockquote>
<p>了解 Linux 开发环境、 Linux 服务器环境搭建部署。</p>
</blockquote>
<blockquote>
<p>了解 TCP / HTTP 、操作系统等基本计算机原理。</p>
</blockquote>
<blockquote>
<p>了解MySQL / SQLServer / MongoDB数据库。</p>
</blockquote>
<h5 id="其它"><a href="#其它" class="headerlink" title="其它:"></a>其它:</h5><blockquote>
<p>代码规范: 熟悉多种语言代码风格检查、代码 Lint 工具、单元测试框架。</p>
</blockquote>
<blockquote>
<p>外语: 能阅读英文文档</p>
</blockquote>
<blockquote>
<p>编辑器: VSCode / Vim / webStorm 等JetBrains公司的IDE</p>
</blockquote>
<h2 id="🌞-致谢"><a href="#🌞-致谢" class="headerlink" title="####🌞 致谢"></a>####🌞 致谢</h2><blockquote>
<p>感谢您花时间阅读我的简历，期待能有机会和您共事。</p>
</blockquote>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/" data-id="ckds9ewap00009sqc279odf8y" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-2017-06-18-前端性能优化一" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/" class="article-date">
  <time datetime="2017-06-17T16:00:00.000Z" itemprop="datePublished">2017-06-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。"><a href="#可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。" class="headerlink" title="可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。"></a>可以在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站的各种优化性能。</h4><h3 id="第一条、尽可能的减少-HTTP-的请求数-Make-Fewer-HTTP-Requests"><a href="#第一条、尽可能的减少-HTTP-的请求数-Make-Fewer-HTTP-Requests" class="headerlink" title="第一条、尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests )"></a>第一条、尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests )</h3><p>http请求是要开销的，想办法减少请求数自然可以提高网页速度。常用的方法，合并css，js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。当然或许将css，js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发，然后在后台 对js，css进行合并，这样对于浏览器来说依然是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。</p>
<p>而css sprites是指只用将页面上的背景图合并成一张，然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图。</p>
<p><a target="_blank" rel="noopener" href="http://www.csssprites.com/">http://www.csssprites.com/</a> 这是个工具网站，它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。</p>
<h3 id="第二条、使用CDN-内容分发网络-Use-a-Content-Delivery-Network"><a href="#第二条、使用CDN-内容分发网络-Use-a-Content-Delivery-Network" class="headerlink" title="第二条、使用CDN(内容分发网络): Use a Content Delivery Network"></a>第二条、使用CDN(内容分发网络): Use a Content Delivery Network</h3><p>说实话，对于CDN这一块自己并不是很了解，简单地讲，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，杭州的用户访问近杭州服务器上的内容，北京的访问 近北京服务器上的内容。这样可以有效减少数据在网络上传输的时间，提高速度。更详细地内容大家可以参考百度百科上对于CDN的解释。Yahoo!把静态内 容分布到CDN减少了用户影响时间20%或更多。</p>
<h3 id="第三条、-添加Expire-Cache-Control-头：Add-an-Expires-Header"><a href="#第三条、-添加Expire-Cache-Control-头：Add-an-Expires-Header" class="headerlink" title="第三条、 添加Expire/Cache-Control 头：Add an Expires Header"></a>第三条、 添加Expire/Cache-Control 头：Add an Expires Header</h3><p>现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置 Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修 改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。一个典型的HTTP 1.1协议返回的头信息：</p>
<p>HTTP/1.1 200 OK</p>
<p>Date: Fri, 30 Oct 1998 13:19:41 GMT</p>
<p>Server: Apache/1.3.3 (Unix)</p>
<p>Cache-Control: max-age=3600, must-revalidate</p>
<p>Expires: Fri, 30 Oct 1998 14:19:41 GMT</p>
<p>Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT</p>
<p>ETag: “3e86-410-3596fbbc”</p>
<p>Content-Length: 1040</p>
<p>Content-Type: text/html</p>
<p>其中通过服务器端脚本设置Cache-Control和Expires可以完成。</p>
<p>据我了解，目前阿里巴巴中文站的Expires过期时间是30天。不过期间也有过问题，特别是对于脚本过期时间的设置还是应该仔细考虑下，不然相应 的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。以前做[suggest项目] 的时候就遇到过这个问题。所以，哪些应该缓存，哪些不该缓存还是应该仔细斟酌一番。</p>
<h3 id="第四条、启用Gzip压缩：Gzip-Components"><a href="#第四条、启用Gzip压缩：Gzip-Components" class="headerlink" title="第四条、启用Gzip压缩：Gzip Components"></a>第四条、启用Gzip压缩：Gzip Components</h3><p>Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不仅浏览器可以识别，而且各大“爬虫”也同样可以识别，各位seoer可以放下心了。而且gzip的压缩比例非常大，一般压缩率为85%，就是 说服务器端100K的页面可以压缩到25K左右再发送到客户端。具体的Gzip压缩原理大家可以参考csdn上的《gzip压缩算法》 这篇文章。雅虎特别强调， 所有的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点我们网站做得不错，是一个A。以前我们的首页也并不是A，因为首页上还有很多广告代码投放的js，这些广告代码拥有者的网站的js没有经过gzip 压缩，也会拖累我们网站。</p>
<p>以上三点大多属于服务器端的内容，本人也是粗浅地了解而已。说得不对的地方有待各位指正。</p>
<h3 id="第五条、将css放在页面最上面-Put-Stylesheets-at-the-Top"><a href="#第五条、将css放在页面最上面-Put-Stylesheets-at-the-Top" class="headerlink" title="第五条、将css放在页面最上面 ( Put Stylesheets at the Top)"></a>第五条、将css放在页面最上面 ( Put Stylesheets at the Top)</h3><p>将css放在页面最上面，这是为什么?因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。理由诚如小马哥说得那样很简单。css，全称Cascading Style Sheets (层叠样式表单)。层叠即意味这后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。在[css之!important] 这篇文章的最下面曾简单地提到过这层级关系，这里我们只需要知道css可以被覆盖的。既然前面的可以被覆盖，浏览器在他完全加载完毕之后再去渲染无疑也是 合情合理的很多浏览器下，如IE，把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页 了。Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。所以我们应该尽快让css加载完毕</p>
<p>顺着这层意思，如果我们再细究的话，其实还有可以优化的地方。比如本站上面包含的两个css文件，&lt;linkrel=“stylesheet” rev=“stylesheet”href=“<a target="_blank" rel="noopener" href="http://www.space007.com/themes/google/style/google.css%E2%80%9D">http://www.space007.com/themes/google/style/google.css”</a> type=“text/css” media=“screen”/&gt; 和&lt;link rel=“stylesheet” rev=“stylesheet” href=“<a target="_blank" rel="noopener" href="http://www.space007.com/css/print.css%E2%80%9Dtype=%E2%80%9Ctext/css%E2%80%9D">http://www.space007.com/css/print.css”type=“text/css”</a> media=“print” /&gt;。  从media就可以看出第一个css是针对浏览器的，第二个css文件是针对打印样式的。从用户的行为习惯上来将，要打印页面的动作一定是发生在页面页面 显示出来之后的。所以比较好的方法应该是在页面加载完毕之后再动态地为这张页面加上针对打印设备的css，这样又可以提高一点速度。(哈哈)</p>
<h3 id="第六条、将script放在页面最下面-Put-Scripts-at-the-Bottom"><a href="#第六条、将script放在页面最下面-Put-Scripts-at-the-Bottom" class="headerlink" title="第六条、将script放在页面最下面 (Put Scripts at the Bottom )"></a>第六条、将script放在页面最下面 (Put Scripts at the Bottom )</h3><p>将脚本放在页面最下面的目的有那么两点： 1、 因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。(setTimeout 和 setInterval的执行有点类似于多线程，在相应的响应时间之前也会继续下面的内容渲染。)浏览器这么做的逻辑是因为js随时可能执 行 location.href或是其他可能完全中断此页面过程的函数，即如此，当然得等他执行完毕之后再加载咯。所以放在页面最后，可以有效减少页面可 视元素的加载时间。 2、脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个(IE只能为2个，其他浏览器如ff等都 是默认设置为2个，不过新出的ie8可以达6个)。因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载。但是当脚本文件下载时，浏览 器不会启动其他的并行下载。</p>
<p>当然对各个网站来说，把脚本都放到页面底部加载的可行性还是值得商榷的。就比如阿里巴巴中文站的页面。很多地方有内联的js，页面的显示严重依赖于此，我承认这和无侵入脚本的理念相差甚远，但是很多“历史遗留问题”却不是那么容易解决的。</p>
<h3 id="第七条、避免在CSS中使用Expressions-Avoid-CSS-Expressions"><a href="#第七条、避免在CSS中使用Expressions-Avoid-CSS-Expressions" class="headerlink" title="第七条、避免在CSS中使用Expressions (Avoid CSS Expressions )"></a>第七条、避免在CSS中使用Expressions (Avoid CSS Expressions )</h3><p>不过这样就多了两层无意义的嵌套，肯定不好。还需要一个更好的办法。</p>
<h3 id="第八条、把javascript和css都放到外部文件中-Make-JavaScript-and-CSS-External"><a href="#第八条、把javascript和css都放到外部文件中-Make-JavaScript-and-CSS-External" class="headerlink" title="第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )"></a>第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )</h3><p>这点我想还是很容易理解的。不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增 大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。当然，我在前面中也说过，有些特殊的页面开发人员还是会选择内联 的css和js文件。</p>
<h3 id="第九条、减少DNS查询-Reduce-DNS-Lookups"><a href="#第九条、减少DNS查询-Reduce-DNS-Lookups" class="headerlink" title="第九条、减少DNS查询 (Reduce DNS Lookups)"></a>第九条、减少DNS查询 (Reduce DNS Lookups)</h3><p>在 Internet上域名与IP地址之间是一一对应的，域名(kuqin.com)很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络 上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域 名数尽量控制在2-4个。这就需要对页面整体有一个很好的规划。目前我们这点做的不好，很多打点的广告投放系统拖累了我们。</p>
<h3 id="第十条、压缩-JavaScript-和-CSS-Minify-JavaScript"><a href="#第十条、压缩-JavaScript-和-CSS-Minify-JavaScript" class="headerlink" title="第十条、压缩 JavaScript 和 CSS (Minify JavaScript )"></a>第十条、压缩 JavaScript 和 CSS (Minify JavaScript )</h3><p>压缩js和css的左右很显然，减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。这点我们做得 不错。常用的压缩工具有JsMin、YUI compressor等。另外像<a target="_blank" rel="noopener" href="http://dean.edwards.name/packer/%E8%BF%98%E7%BB%99%E6%88%91%E4%BB%AC%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E4%B8%AA%E9%9D%9E%E5%B8%B8%E6%96%B9%E4%BE%BF%E7%9A%84%E5%9C%A8%E7%BA%BF%E5%8E%8B%E7%BC%A9%E5%B7%A5%E5%85%B7%E3%80%82%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%9C%A8">http://dean.edwards.name/packer/还给我们提供了一个非常方便的在线压缩工具。你可以在</a> jQuery的网页看到压缩过的js文件和没有压缩过的js文件的容量差别：</p>
<p>性能优化2</p>
<p>当然，压缩带来的一个弊端就是代码的可读性没了。相信很多做前端的朋友都遇到过这个问题：看Google的效果很酷，可是去看他的源代码却是一大堆 挤在一起的字符，连函数名都是替换过的，汗死!自己的代码也这样岂不是对维护非常不方便。所有阿里巴巴中文站目前采用的做法是在js和css发布的时候在 服务器端进行压缩。这样在我们很方便地维护自己的代码。</p>
<h3 id="第十一条、避免重定向-Avoid-Redirects"><a href="#第十一条、避免重定向-Avoid-Redirects" class="headerlink" title="第十一条、避免重定向 (Avoid Redirects )"></a>第十一条、避免重定向 (Avoid Redirects )</h3><p>不久前在ieblog上看到过《Internet Explorer and Connection Limits》 这篇文章，比如 当你输入<a target="_blank" rel="noopener" href="http://www.kuqin.com/">http://www.kuqin.com/</a> 的时候服务器会自动产生一个301服务器转向 <a target="_blank" rel="noopener" href="http://www.kuqin.com/">http://www.kuqin.com/</a> ，你看浏览器的地址栏就能看出来。这种重定向自然也是需要消耗时间的。当然这只是一个例子，发生重定向的原因还有很多，但是不变的是每增加一次重定向就会 增加一次web请求，所以因该尽量减少。</p>
<h3 id="第十二条、移除重复的脚本-Remove-Duplicate-Scripts"><a href="#第十二条、移除重复的脚本-Remove-Duplicate-Scripts" class="headerlink" title="第十二条、移除重复的脚本 (Remove Duplicate Scripts )"></a>第十二条、移除重复的脚本 (Remove Duplicate Scripts )</h3><p>这点我想不说也知道，不仅是从性能上考虑，代码规范上看也是这样。但是不得不承认，很多时候我们会因为图一时之快而加上一些或许是重复的代码。或许一个统一的css框架和js框架可以比较好的解决我们的问题。小猪的观点很对，不仅是要做到不重复，更是要做到可重用。</p>
<h3 id="第十三条、配置实体标签-ETags-Configure-ETags"><a href="#第十三条、配置实体标签-ETags-Configure-ETags" class="headerlink" title="第十三条、配置实体标签(ETags) (Configure ETags )"></a>第十三条、配置实体标签(ETags) (Configure ETags )</h3><p>这点我也不懂，呵呵。在inforQ上找到一篇解释得比较详细的说明《使用ETags减少Web应用带宽和负载》，有兴趣的同学可以去看看。</p>
<h3 id="第十四条、使-AJAX-缓存-Make-Ajax-Cacheable"><a href="#第十四条、使-AJAX-缓存-Make-Ajax-Cacheable" class="headerlink" title="第十四条、使 AJAX 缓存 (Make Ajax Cacheable )"></a>第十四条、使 AJAX 缓存 (Make Ajax Cacheable )</h3><p>ajax还要去缓存?做ajax请求的时候往往还要增加一个时间戳去避免他缓存。It’s important to remember that “asynchronous” does not imply “instantaneous”.(记住“异步”不是“瞬间”这一点很重要)。记住，即使AJAX是动态产生的而且只对一个用户起作用，他们依然可以被缓 存。</p>
<h3 id="1-减少HTTP请求次数"><a href="#1-减少HTTP请求次数" class="headerlink" title="1.减少HTTP请求次数"></a>1.减少HTTP请求次数</h3><p>合并图片、CSS、JS，改进首次访问用户等待时间。</p>
<h3 id="2-使用CDN"><a href="#2-使用CDN" class="headerlink" title="2.使用CDN"></a>2.使用CDN</h3><p>就近缓存==&gt;智能路由==&gt;负载均衡==&gt;WSA全站动态加速</p>
<h3 id="3-避免空的src和href"><a href="#3-避免空的src和href" class="headerlink" title="3.避免空的src和href"></a>3.避免空的src和href</h3><p>当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试</p>
<h3 id="4-为文件头指定Expires"><a href="#4-为文件头指定Expires" class="headerlink" title="4.为文件头指定Expires"></a>4.为文件头指定Expires</h3><p>使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。</p>
<h3 id="5-使用gzip压缩内容"><a href="#5-使用gzip压缩内容" class="headerlink" title="5.使用gzip压缩内容"></a>5.使用gzip压缩内容</h3><p>压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。</p>
<h3 id="6-把CSS放到顶部"><a href="#6-把CSS放到顶部" class="headerlink" title="6.把CSS放到顶部"></a>6.把CSS放到顶部</h3><h3 id="7-把JS放到底部"><a href="#7-把JS放到底部" class="headerlink" title="7.把JS放到底部"></a>7.把JS放到底部</h3><p>防止js加载对之后资源造成阻塞。</p>
<h3 id="8-避免使用CSS表达式"><a href="#8-避免使用CSS表达式" class="headerlink" title="8.避免使用CSS表达式"></a>8.避免使用CSS表达式</h3><h3 id="9-将CSS和JS放到外部文件中"><a href="#9-将CSS和JS放到外部文件中" class="headerlink" title="9.将CSS和JS放到外部文件中"></a>9.将CSS和JS放到外部文件中</h3><p>目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。</p>
<h3 id="10-权衡DNS查找次数"><a href="#10-权衡DNS查找次数" class="headerlink" title="10.权衡DNS查找次数"></a>10.权衡DNS查找次数</h3><p>减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。</p>
<p>IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。</p>
<h3 id="11-精简CSS和JS"><a href="#11-精简CSS和JS" class="headerlink" title="11.精简CSS和JS"></a>11.精简CSS和JS</h3><h3 id="12-避免跳转"><a href="#12-避免跳转" class="headerlink" title="12.避免跳转"></a>12.避免跳转</h3><p>同域：注意避免反斜杠 “/” 的跳转；</p>
<p>跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）</p>
<h3 id="13-删除重复的JS和CSS"><a href="#13-删除重复的JS和CSS" class="headerlink" title="13.删除重复的JS和CSS"></a>13.删除重复的JS和CSS</h3><p>重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。</p>
<h3 id="14-配置ETags"><a href="#14-配置ETags" class="headerlink" title="14.配置ETags"></a>14.配置ETags</h3><p>它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载</p>
<h3 id="15-可缓存的AJAX"><a href="#15-可缓存的AJAX" class="headerlink" title="15.可缓存的AJAX"></a>15.可缓存的AJAX</h3><p>“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。</p>
<h3 id="16-使用GET来完成AJAX请求"><a href="#16-使用GET来完成AJAX请求" class="headerlink" title="16.使用GET来完成AJAX请求"></a>16.使用GET来完成AJAX请求</h3><p>当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。</p>
<h3 id="17-减少DOM元素数量"><a href="#17-减少DOM元素数量" class="headerlink" title="17.减少DOM元素数量"></a>17.减少DOM元素数量</h3><p>是否存在一个是更贴切的标签可以使用？标签语义化，避免滥用无意义标签</p>
<h3 id="18-避免404"><a href="#18-避免404" class="headerlink" title="18.避免404"></a>18.避免404</h3><p>有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。</p>
<h3 id="19-减少Cookie的大小"><a href="#19-减少Cookie的大小" class="headerlink" title="19.减少Cookie的大小"></a>19.减少Cookie的大小</h3><h3 id="20-使用无cookie的域"><a href="#20-使用无cookie的域" class="headerlink" title="20.使用无cookie的域"></a>20.使用无cookie的域</h3><p>比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。</p>
<h3 id="21-不要使用滤镜"><a href="#21-不要使用滤镜" class="headerlink" title="21.不要使用滤镜"></a>21.不要使用滤镜</h3><p>png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg</p>
<h3 id="22-不要在HTML中缩放图片"><a href="#22-不要在HTML中缩放图片" class="headerlink" title="22.不要在HTML中缩放图片"></a>22.不要在HTML中缩放图片</h3><h3 id="23-缩小favicon-ico并缓存"><a href="#23-缩小favicon-ico并缓存" class="headerlink" title="23.缩小favicon.ico并缓存"></a>23.缩小favicon.ico并缓存</h3><pre><code>&lt;link href=&quot;/favicon.ico&quot; rel=&quot;Shortcut Icon&quot; type=&quot;image/x-icon&quot;&gt;</code></pre>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/" data-id="ckds6fxac000uk8qcd3bhcy94" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-05-15-调用百度地图插件-更新" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/" class="article-date">
  <time datetime="2017-05-14T16:00:00.000Z" itemprop="datePublished">2017-05-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="调用百度地图插件-常用技术"><a href="#调用百度地图插件-常用技术" class="headerlink" title="调用百度地图插件,常用技术"></a>调用百度地图插件,常用技术</h3><pre><code>1.创建地图： var map = new BMap.Map(&quot;divid&quot;);

2.创建坐标点：var point = new BMap.Point(&quot;经度&quot;,&quot;纬度&quot;);

3.设置视图中心点：map.centerAndZoom(point,size);

4.激活滚轮调整大小功能：map.enableScrollWheelZoom();

5.添加控件：map.addControl(new BMap.Xxx());

6.添加覆盖物：map.addOverlay();</code></pre>
<h3 id="控件介绍"><a href="#控件介绍" class="headerlink" title="控件介绍"></a>控件介绍</h3><pre><code>1.NavigationControl：缩放地图的控件，默认在左上角；

2.OverviewMapControl：地图的缩略图的控件，默认在右下方；

3.ScaleControl：地图显示比例的控件，默认在左下方；

4.MapTypeControl：地图类型控件，默认在右上方；</code></pre>
<h3 id="代码示例："><a href="#代码示例：" class="headerlink" title="代码示例："></a>代码示例：</h3><pre><code>&lt;!--hexoPostRenderEscape:&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;26&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;27&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;28&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;29&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;30&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;31&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;32&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;head&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;!--引用百度地图--&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;script type&amp;#x3D;&amp;quot;text&amp;#x2F;javascript&amp;quot; src&amp;#x3D;&amp;quot;http:&amp;#x2F;&amp;#x2F;api.map.baidu.com&amp;#x2F;api?v&amp;#x3D;1.3&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;&amp;#x2F;script&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;title&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            控件使用&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;&amp;#x2F;title&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;                &amp;lt;!--&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        设计样式&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            container容器：占50%大小&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        --&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;style type&amp;#x3D;&amp;quot;text&amp;#x2F;css&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        #container&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            width:50%;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            height:50%;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;&amp;#x2F;style&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;&amp;#x2F;head&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;body&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;div id&amp;#x3D;&amp;quot;container&amp;quot;&amp;gt;&amp;lt;&amp;#x2F;div&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;script type&amp;#x3D;&amp;quot;text&amp;#x2F;javascript&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            var map &amp;#x3D; new BMap.Map(&amp;quot;container&amp;quot;);&amp;#x2F;&amp;#x2F;在container容器中创建一个地图,参数container为div的id属性;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            var point &amp;#x3D; new BMap.Point(500,500);&amp;#x2F;&amp;#x2F;定位&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            map.centerAndZoom(point,15);                &amp;#x2F;&amp;#x2F;将point移到浏览器中心，并且地图大小调整为15;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            map.addControl(new BMap.NavigationControl());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            map.addControl(new BMap.MapTypeControl());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            map.addControl(new BMap.ScaleControl());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            map.addControl(new BMap.OverviewMapControl());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;&amp;#x2F;script&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;&amp;#x2F;body&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;&amp;#x2F;html&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;:hexoPostRenderEscape--&gt;</code></pre>
<h3 id="标注：Marker"><a href="#标注：Marker" class="headerlink" title="标注：Marker"></a>标注：Marker</h3><pre><code> 百度地图API学习总结

(1)在point处添加标注：var marker = new BMap.Marker(point);

(2)添加覆盖物：map.addOverlay(marker);

(3)激活标注的拖拽功能：marker.enableDragging();

(4)为标注添加事件：marker.addEventListener(&quot;名称&quot;,function()&#123;

    //点击标注后的事件

&#125;);

(5)删除覆盖物：map.removeOverlay(marker);

(6)销毁标注：marker.dispose();</code></pre>
<h3 id="信息窗口：InfoWindow"><a href="#信息窗口：InfoWindow" class="headerlink" title="信息窗口：InfoWindow"></a>信息窗口：InfoWindow</h3><p>(1)在某个特定的位置创建一个信息窗口：var infowindow = new BMap.InfoWindow(“内容”,{width:250,height:100,title:”hello”});</p>
<p>(2)在地图中央打开信息窗口：map.openInfoWindow(infoWindow,map.getCenter());</p>
<h3 id="完整代码"><a href="#完整代码" class="headerlink" title="完整代码"></a>完整代码</h3>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;!--地图 --&gt;</span><br><span class="line">        &lt;script src&#x3D;&quot;https:&#x2F;&#x2F;api.map.baidu.com&#x2F;api?v&#x3D;2.0&amp;ak&#x3D;GW0UPwBKw1aCl983mr4WFLCcBn8u18Az&amp;s&#x3D;1&quot; type&#x3D;&quot;text&#x2F;javascript&quot; charset&#x3D;&quot;utf-8&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">     &lt;!--地图 --&gt;</span><br><span class="line">    &lt;style type&#x3D;&quot;text&#x2F;css&quot;&gt;</span><br><span class="line">        * &#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        html,</span><br><span class="line">        body &#123;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 100%;</span><br><span class="line">            position: relative;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        h3 &#123;</span><br><span class="line">            display: block;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 60px;</span><br><span class="line">            line-height: 60px;</span><br><span class="line">            text-align: center;</span><br><span class="line">            background: aquamarine;</span><br><span class="line">            color: #fff;</span><br><span class="line">            font-size: 40px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;h3&gt;我的地图&lt;&#x2F;h3&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;baiduMap&quot; style&#x3D;&quot;width:100%;margin-top: 51px;&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var map &#x3D; new BMap.Map(&quot;baiduMap&quot;);</span><br><span class="line">    map.addControl(new BMap.MapTypeControl()); &#x2F;&#x2F;添加地图类型控件</span><br><span class="line">    map.addControl(new BMap.NavigationControl());   &#x2F;&#x2F;添加左上地图缩放控件</span><br><span class="line">&#x2F;&#x2F;        map.enableScrollWheelZoom(true); &#x2F;&#x2F;开启鼠标滚轮缩放</span><br><span class="line"></span><br><span class="line">    var point &#x3D; new BMap.Point(113.305679,23.104074);&#x2F;&#x2F;定位</span><br><span class="line">    map.centerAndZoom(point,15);&#x2F;&#x2F;将point移到浏览器中心，并且地图大小调整为15;</span><br><span class="line">    var marker &#x3D; new BMap.Marker(point);&#x2F;&#x2F; 创建标注</span><br><span class="line">    map.addOverlay(marker);&#x2F;&#x2F; 将标注添加到地图中</span><br><span class="line"></span><br><span class="line">    var opts &#x3D; &#123;</span><br><span class="line">        width : 200,     &#x2F;&#x2F; 信息窗口宽度</span><br><span class="line">        height: 50,     &#x2F;&#x2F; 信息窗口高度</span><br><span class="line">        title : &quot;Hello&quot;  &#x2F;&#x2F; 信息窗口标题</span><br><span class="line">    &#125;</span><br><span class="line">    var infoWindow &#x3D; new BMap.InfoWindow(&quot;World&quot;, opts);  &#x2F;&#x2F; 创建信息窗口对象</span><br><span class="line">    marker.openInfoWindow(infoWindow, map.getCenter());      &#x2F;&#x2F; 打开信息窗口</span><br><span class="line">    marker.addEventListener(&quot;click&quot;,function()&#123;</span><br><span class="line">        &#x2F;&#x2F;点击标注后的事件</span><br><span class="line">        marker.openInfoWindow(infoWindow, map.getCenter());      &#x2F;&#x2F; 打开信息窗口</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>








      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/" data-id="ckds6fxac000sk8qc25zth0a5" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-04-23-vue搭建项目" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/" class="article-date">
  <time datetime="2017-04-22T16:00:00.000Z" itemprop="datePublished">2017-04-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Vue推荐开发环境"><a href="#Vue推荐开发环境" class="headerlink" title="Vue推荐开发环境"></a>Vue推荐开发环境</h3><pre><code>Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016</code></pre>
<p>现在开始安装环境</p>
<h3 id="安装nodejs"><a href="#安装nodejs" class="headerlink" title="安装nodejs"></a>安装nodejs</h3><p>可以在终端里下载，但是不推荐，npm的版本会报错</p>
<p>去nodejs官网下载即可，地址：<a target="_blank" rel="noopener" href="http://nodejs.cn/">http://nodejs.cn/</a>中文网</p>
<h3 id="安装vue淘宝镜像"><a href="#安装vue淘宝镜像" class="headerlink" title="安装vue淘宝镜像"></a>安装vue淘宝镜像</h3><pre><code>npm install -g vue –registry=https://registry.npm.taobao.org</code></pre>
<h3 id="安装webpack"><a href="#安装webpack" class="headerlink" title="安装webpack"></a>安装webpack</h3><pre><code>npm install webpack -g</code></pre>
<h3 id="安装vue脚手架"><a href="#安装vue脚手架" class="headerlink" title="安装vue脚手架"></a>安装vue脚手架</h3><pre><code>npm install vue-cli -g</code></pre>
<p>—————-如果第二次编写新的vue项目，就可以在这里开始了—————–</p>
<h3 id="根据模板创建项目"><a href="#根据模板创建项目" class="headerlink" title="根据模板创建项目"></a>根据模板创建项目</h3><pre><code>vue init webpack 项目名字&lt;项目名字不能用中文&gt;</code></pre>
<h3 id="会有一些初始化的设置，如下输入"><a href="#会有一些初始化的设置，如下输入" class="headerlink" title="会有一些初始化的设置，如下输入:"></a>会有一些初始化的设置，如下输入:</h3><pre><code>Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

? Vue build (Use arrow keys)
&gt; Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere  直接回车默认

? Install vue-router? (Y/n)  是否安装vue-router y 安装 （可新建好项目后手动安装）

Use ESLint to lint your code? n  是否启动语法报错（建议不启动）

pick an eslint preset. 默认Standard

setup unit tests with karma + mocha?No(单元测试不需要)

setup e2e tests with Nightwatch?No(单元测试不需要)</code></pre>
<h3 id="进入项目"><a href="#进入项目" class="headerlink" title="进入项目"></a>进入项目</h3><pre><code>cd 项目名字</code></pre>
<h3 id="安装项目依赖"><a href="#安装项目依赖" class="headerlink" title="安装项目依赖"></a>安装项目依赖</h3><pre><code>npm install</code></pre>
<h3 id="安装-vue-路由模块vue-router和网络请求模块vue-resource-–save-dev-是你开发时候依赖的东西，–save-是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）"><a href="#安装-vue-路由模块vue-router和网络请求模块vue-resource-–save-dev-是你开发时候依赖的东西，–save-是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）" class="headerlink" title="安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）"></a>安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西（如果在初始化设置已经安装了可省略）</h3><pre><code>npm install vue-router vue-resource –save</code></pre>
<h3 id="启动项目"><a href="#启动项目" class="headerlink" title="启动项目"></a>启动项目</h3><pre><code>npm run dev</code></pre>
<h3 id="发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）"><a href="#发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）" class="headerlink" title="发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）"></a>发布项目（打包项目，会在目录多出一个build目录为项目打包好的项目，直接放到服务器就可以）</h3><pre><code>npm run build</code></pre>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/" data-id="ckds6fxab000qk8qcefn3f2k0" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-04-21-调用百度地图插件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/" class="article-date">
  <time datetime="2017-04-20T16:00:00.000Z" itemprop="datePublished">2017-04-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>　　# 调用百度地图插件</p>
<h3 id="引入百度地图插件"><a href="#引入百度地图插件" class="headerlink" title="引入百度地图插件"></a>引入百度地图插件</h3><pre><code>&lt;!--hexoPostRenderEscape:&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;script src&amp;#x3D;&amp;quot;http:&amp;#x2F;&amp;#x2F;api.map.baidu.com&amp;#x2F;api?v&amp;#x3D;2.0&amp;amp;ak&amp;#x3D;W1a6ywZFkybedSCHadpRbkz4w5HYfG4R&amp;quot; type&amp;#x3D;&amp;quot;text&amp;#x2F;javascript&amp;quot; charset&amp;#x3D;&amp;quot;utf-8&amp;quot;&amp;gt;&amp;lt;&amp;#x2F;script&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;:hexoPostRenderEscape--&gt;</code></pre>
<h3 id="完整代码"><a href="#完整代码" class="headerlink" title="完整代码"></a>完整代码</h3>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;http:&#x2F;&#x2F;api.map.baidu.com&#x2F;api?v&#x3D;2.0&amp;ak&#x3D;W1a6ywZFkybedSCHadpRbkz4w5HYfG4R&quot; type&#x3D;&quot;text&#x2F;javascript&quot; charset&#x3D;&quot;utf-8&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">    &lt;style type&#x3D;&quot;text&#x2F;css&quot;&gt;</span><br><span class="line">        * &#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        html,</span><br><span class="line">        body &#123;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 100%;</span><br><span class="line">            position: relative;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        h3 &#123;</span><br><span class="line">            display: block;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 60px;</span><br><span class="line">            line-height: 60px;</span><br><span class="line">            text-align: center;</span><br><span class="line">            background: aquamarine;</span><br><span class="line">            color: #fff;</span><br><span class="line">            font-size: 40px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #allmap &#123;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 700px;</span><br><span class="line">        &#125;</span><br><span class="line">        #r-result&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">            left: 0;</span><br><span class="line">            top: 100px;</span><br><span class="line">            background: #000;</span><br><span class="line">            color: #fff;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;h3&gt;我的地图&lt;&#x2F;h3&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;allmap&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;r-result&quot;&gt;请输入:&lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;suggestId&quot; size&#x3D;&quot;20&quot; value&#x3D;&quot;百度&quot; style&#x3D;&quot;width:150px;&quot; &#x2F;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;searchResultPanel&quot; style&#x3D;&quot;border:1px solid #C0C0C0;width:150px;height:auto; display:none;&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">    var map &#x3D; new BMap.Map(&quot;allmap&quot;);</span><br><span class="line">    map.centerAndZoom(&quot;广州&quot;, 15); &#x2F;&#x2F; 初始化地图,设置中心点坐标和地图级别</span><br><span class="line">    map.addControl(new BMap.MapTypeControl()); &#x2F;&#x2F;添加地图类型控件</span><br><span class="line">    map.setCurrentCity(&quot;广州&quot;); &#x2F;&#x2F; 设置地图显示的城市 此项是必须设置的</span><br><span class="line">    map.enableScrollWheelZoom(true); &#x2F;&#x2F;开启鼠标滚轮缩放</span><br><span class="line">    function G(id) &#123;</span><br><span class="line">        return document.getElementById(id);</span><br><span class="line">    &#125;</span><br><span class="line">    var ac &#x3D; new BMap.Autocomplete( &#x2F;&#x2F;建立一个自动完成的对象</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;input&quot;: &quot;suggestId&quot;,</span><br><span class="line">                &quot;location&quot;: map</span><br><span class="line">            &#125;);</span><br><span class="line"></span><br><span class="line">    ac.addEventListener(&quot;onhighlight&quot;, function(e) &#123; &#x2F;&#x2F;鼠标放在下拉列表上的事件</span><br><span class="line">        var str &#x3D; &quot;&quot;;</span><br><span class="line">        var _value &#x3D; e.fromitem.value;</span><br><span class="line">        var value &#x3D; &quot;&quot;;</span><br><span class="line">        if(e.fromitem.index &gt; -1) &#123;</span><br><span class="line">            value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;</span><br><span class="line">        &#125;</span><br><span class="line">        str &#x3D; &quot;FromItem&lt;br &#x2F;&gt;index &#x3D; &quot; + e.fromitem.index + &quot;&lt;br &#x2F;&gt;value &#x3D; &quot; + value;</span><br><span class="line"></span><br><span class="line">        value &#x3D; &quot;&quot;;</span><br><span class="line">        if(e.toitem.index &gt; -1) &#123;</span><br><span class="line">            _value &#x3D; e.toitem.value;</span><br><span class="line">            value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;</span><br><span class="line">        &#125;</span><br><span class="line">        str +&#x3D; &quot;&lt;br &#x2F;&gt;ToItem&lt;br &#x2F;&gt;index &#x3D; &quot; + e.toitem.index + &quot;&lt;br &#x2F;&gt;value &#x3D; &quot; + value;</span><br><span class="line">        G(&quot;searchResultPanel&quot;).innerHTML &#x3D; str;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    var myValue;</span><br><span class="line">    ac.addEventListener(&quot;onconfirm&quot;, function(e) &#123; &#x2F;&#x2F;鼠标点击下拉列表后的事件</span><br><span class="line">        var _value &#x3D; e.item.value;</span><br><span class="line">        myValue &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;</span><br><span class="line">        G(&quot;searchResultPanel&quot;).innerHTML &#x3D; &quot;onconfirm&lt;br &#x2F;&gt;index &#x3D; &quot; + e.item.index + &quot;&lt;br &#x2F;&gt;myValue &#x3D; &quot; + myValue;</span><br><span class="line"></span><br><span class="line">        setPlace();</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    function setPlace() &#123;</span><br><span class="line">        map.clearOverlays(); &#x2F;&#x2F;清除地图上所有覆盖物</span><br><span class="line">        function myFun() &#123;</span><br><span class="line">            var pp &#x3D; local.getResults().getPoi(0).point; &#x2F;&#x2F;获取第一个智能搜索的结果</span><br><span class="line">            map.centerAndZoom(pp, 18);</span><br><span class="line">            map.addOverlay(new BMap.Marker(pp)); &#x2F;&#x2F;添加标注</span><br><span class="line">        &#125;</span><br><span class="line">        var local &#x3D; new BMap.LocalSearch(map, &#123; &#x2F;&#x2F;智能搜索</span><br><span class="line">            onSearchComplete: myFun</span><br><span class="line">        &#125;);</span><br><span class="line">        local.search(myValue);</span><br><span class="line">    &#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>








      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/" data-id="ckds6fxaa000ok8qc6jh7fbdf" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-04-21-vue环境配置及创建vue项目" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/04/21/2017-04-21-vue%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E5%8F%8A%E5%88%9B%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/" class="article-date">
  <time datetime="2017-04-20T16:00:00.000Z" itemprop="datePublished">2017-04-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/04/21/2017-04-21-vue%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E5%8F%8A%E5%88%9B%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/">vue环境配置及创建vue项目</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>　　# vue环境配置及创建vue项目</p>
<h3 id="安装-node-js"><a href="#安装-node-js" class="headerlink" title="安装 node.js"></a>安装 node.js</h3><p>  首先需要安装node环境，可以直接到中文官网:<a target="_blank" rel="noopener" href="http://nodejs.cn/">http://nodejs.cn/</a> 下载安装包。</p>
<p>  只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装:<a target="_blank" rel="noopener" href="http://blog.csdn.net/s8460049/article/details/52396399">http://blog.csdn.net/s8460049/article/details/52396399</a></p>
<p>  安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。</p>
<h3 id="安装-vue-cli"><a href="#安装-vue-cli" class="headerlink" title="安装 vue-cli"></a>安装 vue-cli</h3><p>  安装好了 node，我们可以直接全局安装 vue-cli</p>
<p>  npm install -g vue-cli</p>
<p>  但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm</p>
<p>  npm install -g cnpm –registry=<a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a></p>
<p>  如果安装失败，可以使用</p>
<p>  npm cache clean</p>
<p>  清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存</p>
<p>  同样可以使用 cnpm -v 查看是否安装成功</p>
<p>  然后使用 cnpm 安装 vue-cli 和 webpack</p>
<p>  cnpm install -g vue-cli</p>
<p>  最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack</p>
<p>  安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。</p>
<p>  如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本</p>
<h3 id="创建vue项目"><a href="#创建vue项目" class="headerlink" title="创建vue项目"></a>创建vue项目</h3><p>  vue init webpack 项目名称</p>
<p>然后会出现一些简单的配置</p>
<p>  ? Project name (zlejvue)</p>
<p>  ? Project name zlejvue</p>
<p>  ? Project description (A Vue.js project)</p>
<p>  ? Project description A Vue.js project</p>
<p>  ? Author</p>
<p>  ? Author</p>
<p>  ? Vue build (Use arrow keys)</p>
<p>  ? Vue build standalone</p>
<p>  ? Install vue-router? (Y/n)</p>
<p>  ? Install vue-router? Yes</p>
<p>  ? Use ESLint to lint your code? (Y/n) n</p>
<p>  ? Use ESLint to lint your code? No</p>
<p>  ? Setup unit tests with Karma + Mocha? (Y/n) n</p>
<p>  ? Setup unit tests with Karma + Mocha? No</p>
<p>  ? Setup e2e tests with Nightwatch? (Y/n) n</p>
<p>  ? Setup e2e tests with Nightwatch? No<br>  <br>配置完之后就可以按照他的步骤打开项目</p>
<p>  cd zlejvue</p>
<p>  npm install</p>
<p>  npm run dev</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/04/21/2017-04-21-vue%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E5%8F%8A%E5%88%9B%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/" data-id="ckds6fxa9000lk8qcedz8741f" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-04-20-Linux平台安装图像化桌面CentOS 7" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/04/20/2017-04-20-Linux%E5%B9%B3%E5%8F%B0%E5%AE%89%E8%A3%85%E5%9B%BE%E5%83%8F%E5%8C%96%E6%A1%8C%E9%9D%A2CentOS%207/" class="article-date">
  <time datetime="2017-04-19T16:00:00.000Z" itemprop="datePublished">2017-04-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/04/20/2017-04-20-Linux%E5%B9%B3%E5%8F%B0%E5%AE%89%E8%A3%85%E5%9B%BE%E5%83%8F%E5%8C%96%E6%A1%8C%E9%9D%A2CentOS%207/">Linux平台安装图像化桌面CentOS 7</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="Linux平台安装图像化桌面CentOS-7"><a href="#Linux平台安装图像化桌面CentOS-7" class="headerlink" title="Linux平台安装图像化桌面CentOS 7"></a>Linux平台安装图像化桌面CentOS 7</h1><p> <br>###安装操作系统<br>本项目需要部署在Linux平台下。建议使用CentOS 7。<br>如果事前已经安装了操作系统，请跳过此章节。<br>本文假定读者具备Linux图形界面的使用能力。</p>
<ol>
<li><p>启动服务器，插入系统安装光盘或U盘，并在BIOS中设置以光盘或U盘启动（视具体场合下的安装介质而定）。</p>
</li>
<li><p>启动后，进入如同下图的画面，利用键盘的方向键选择第一项“Install CentOS 7”，等待片刻后进入安装画面。</p>
</li>
</ol>
<img src="/myblog/images/centos图形化/1.png" height="500" width="600">

<ol start="3">
<li><p>进入CentOS7安装程序。第一个画面是选择要安装的系统的语言。接下来的截图选择的是简体中文（中国）。选择后，按【继续】进入下一步的安装概况画面。</p>
<img src="/myblog/images/centos图形化/2.png" height="500" width="600">
</li>
<li><p>点击【日期与时间】，进入系统时间设置。</p>
</li>
</ol>
<img src="/myblog/images/centos图形化/3.png" height="500" width="600">

<ol start="5">
<li>确认系统时区、日期与时间是否正确。完成确认或修改后，点击【完成】按钮返回安装概况。</li>
</ol>
<img src="/myblog/images/centos图形化/4.png" height="500" width="600">
6.    回到安装概况画面后，点击【安装位置】，选择安装目的地。

<img src="/myblog/images/centos图形化/5.png" height="500" width="600">

<ol start="7">
<li><p>设置硬盘分区。一般而言，选择第一个本地磁盘，然后分区选项选择【自动配置分区】即可。如果有需要，也可以自定义分区大小等数据。完成配置后点击“完成”按钮即可。</p>
<img src="/myblog/images/centos图形化/6.png" height="500" width="600">
</li>
<li><p>完成分区选择与配置后，回到安装概况画面，点击【软件选择】。</p>
<img src="/myblog/images/centos图形化/6.png" height="500" width="600">


</li>
</ol>
<ol start="9">
<li><p>在软件选择画面中，从左边栏找到【带GUI的服务器】，然后在右边栏找到【KDE】、【MariaDB数据库服务器】、【开发工具】，勾选这三个工具，然后点击“完成”。</p>
<img src="/myblog/images/centos图形化/7.png" height="500" width="600">
<img src="/myblog/images/centos图形化/8.png" height="500" width="600">
<img src="/myblog/images/centos图形化/9.png" height="500" width="600"></li>
<li><p>回到安装概况画面，点击右下角的【开始安装】按钮进入下一个环节。</p>
<img src="/myblog/images/centos图形化/13.png" height="500" width="600">
</li>
<li><p>安装程序正在把文件复制到磁盘上。此时，用户可以配置root账号密码，以及添加更多用户账号。先点击【ROOT 密码】设置root密码。</p>
<img src="/myblog/images/centos图形化/10.png" height="500" width="600">
</li>
<li><p>在ROOT密码画面中，设置root账户密码，然后点击“完成”。</p>
<img src="/myblog/images/centos图形化/11.png" height="500" width="600">


</li>
</ol>
<ol start="13">
<li>为了确保安全，一般建议系统管理员再设置另一个管理专用的账号，而不是直接使用root账号进行操作。点击【创建用户】可创建新的账户。记得勾选【将此用户做为管理员】选项。</li>
</ol>
<img src="/myblog/images/centos图形化/12.png" height="500" width="600">

<ol start="14">
<li><p>当系统文件复制、解压完毕后，安装程序会自动重启电脑，进入命令行界面。此时系统已安装完毕。</p>
</li>
<li><p>启动系统后进入登录界面，系统默认登录界面是新创建的管理员账户，输入密码登录。</p>
</li>
</ol>
<img src="/myblog/images/centos图形化/14.png" height="500" width="600">


<ol start="16">
<li>如需用root账户登录，点击“未列出？”，输入root账户用户名、密码进行登录。</li>
</ol>
<img src="/myblog/images/centos图形化/15.png" height="500" width="600">

<ol start="17">
<li>登录后，系统界面。<img src="/myblog/images/centos图形化/16.png" height="500" width="600">


</li>
</ol>
<p> <br>###配置软件环境<br>在配置网络环境之前，请先通过ping命令，确认当前服务器是否可以访问互联网。<br>ping <a target="_blank" rel="noopener" href="http://www.baidu.com/">www.baidu.com</a></p>
<p>如果互联网已经接通，就可以执行下一步操作了。否则，请向网络管理相关人员寻求协助。</p>
<p>2.1安装JDK<br>在终端下运行以下命令安装或升级JDK 1.7.0：<br>sudo yum install java-1.7.0-openjdk</p>
<p>此时输入“y”，系统将自动完成安装。以下其他软件的安装方式也是类似，不再重复。</p>
<p>2.2安装Tomcat<br>在终端下按顺序运行以下命令，安装或升级Tomcat<br>sudo yum install tomcat<br>sudo yum install tomcat-webapps tomcat-admin-webapps</p>
<p>完成软件安装后，到以下路径，设置tomcat管理页面的账号密码：<br>/etc/tomcat/tomcat-users.xml</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/04/20/2017-04-20-Linux%E5%B9%B3%E5%8F%B0%E5%AE%89%E8%A3%85%E5%9B%BE%E5%83%8F%E5%8C%96%E6%A1%8C%E9%9D%A2CentOS%207/" data-id="ckds6fxa9000jk8qc59ck699i" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-04-20-锤子科技官网banner3D效果" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/04/20/2017-04-20-%E9%94%A4%E5%AD%90%E7%A7%91%E6%8A%80%E5%AE%98%E7%BD%91banner3D%E6%95%88%E6%9E%9C/" class="article-date">
  <time datetime="2017-04-19T16:00:00.000Z" itemprop="datePublished">2017-04-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/04/20/2017-04-20-%E9%94%A4%E5%AD%90%E7%A7%91%E6%8A%80%E5%AE%98%E7%BD%91banner3D%E6%95%88%E6%9E%9C/">锤子科技官网banner3D效果</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>　　# 锤子科技官网banner3D效果</p>
<p>  前段时间看到锤子官网的banner3D效果觉得好酷炫，然后就在网上搜了一下实现方法，发现还真有。<br>  我就借鉴了他的demo来自己写了一个简单背景变换的demo，因为没有做过渡效果，没官网好看，还算凑合，<br>  可以看效果</p>
<p>  这是锤子官网效果，可以自行去看看：<a target="_blank" rel="noopener" href="http://www.smartisan.com/#/home">http://www.smartisan.com/#/home</a></p>
<p>  附上代码：</p>
  <figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;utf-8&quot;</span>/&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        section &#123;</span><br><span class="line">            margin: auto;</span><br><span class="line">            width: 1000px;</span><br><span class="line">            height: 500px;</span><br><span class="line">            margin-top: 100px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .cover &#123;</span><br><span class="line">            width: 100%;</span><br><span class="line">            height: 100%;</span><br><span class="line">            border-radius: 10px;</span><br><span class="line">            background-color: <span class="comment">#5e5e5e;</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        /*transform*/</span><br><span class="line">        section &#123;</span><br><span class="line">            position: relative;</span><br><span class="line">            perspective: 2000px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .cover &#123;</span><br><span class="line">            transform-origin: 50% 50% 0;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;section&gt;</span><br><span class="line">    &lt;div class=<span class="string">&quot;cover&quot;</span>&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/section&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var origin = &#123;</span><br><span class="line">        X: document.body.clientWidth / 2,</span><br><span class="line">        Y: document.body.clientHeight / 2</span><br><span class="line">    &#125;;</span><br><span class="line">    var o = document.querySelector(<span class="string">&#x27;.cover&#x27;</span>);</span><br><span class="line">    document.querySelector(<span class="string">&#x27;section&#x27;</span>).onmouseover=<span class="function"><span class="title">function</span></span>()&#123;</span><br><span class="line">        document.querySelector(<span class="string">&#x27;section&#x27;</span>).addEventListener(<span class="string">&#x27;mousemove&#x27;</span>, <span class="keyword">function</span> (e) &#123;</span><br><span class="line">            var rotate = &#123;x: 1 - e.pageY / origin.Y, y: e.pageX / origin.X - 1&#125;;</span><br><span class="line">            var transform = <span class="string">&quot;rotateX(&quot;</span> + rotate.x *10 + <span class="string">&quot;deg) rotateY(&quot;</span> + rotate.y * 10 + <span class="string">&quot;deg)&quot;</span>;  //变换效果</span><br><span class="line">            o.style.transform = transform;</span><br><span class="line">            o.style.boxShadow = -parseInt(rotate.y * 30) + <span class="string">&#x27;px &#x27;</span>+ parseInt(rotate.x * 20+20)+ <span class="string">&#x27;px &#x27;</span> + <span class="string">&#x27;50px #333&#x27;</span>;  //边框阴影效果</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    document.querySelector(<span class="string">&#x27;section&#x27;</span>).onmouseout=<span class="function"><span class="title">function</span></span>()&#123;</span><br><span class="line">            o.style.transform =<span class="string">&quot;rotateX(0deg) rotateY(0deg)&quot;</span>;</span><br><span class="line">        o.style.boxShadow =<span class="string">&#x27;0px 0px&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>






      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/04/20/2017-04-20-%E9%94%A4%E5%AD%90%E7%A7%91%E6%8A%80%E5%AE%98%E7%BD%91banner3D%E6%95%88%E6%9E%9C/" data-id="ckds6fxa8000hk8qc85r6b3yd" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-03-12-Rem自适应js-优化flexible.js" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/03/12/2017-03-12-Rem%E8%87%AA%E9%80%82%E5%BA%94js-%E4%BC%98%E5%8C%96flexible.js/" class="article-date">
  <time datetime="2017-03-11T16:00:00.000Z" itemprop="datePublished">2017-03-12</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/03/12/2017-03-12-Rem%E8%87%AA%E9%80%82%E5%BA%94js-%E4%BC%98%E5%8C%96flexible.js/">Rem自适应js-优化flexible.js</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>基于阿里的一个库：lib-flexible.js，里面有一些东西方法和自定义不需要用到的，所以做了一个精简版的，另外还修复了UC浏览器竖屏与横屏转换的BUG。</p>
<h3 id="js代码"><a href="#js代码" class="headerlink" title="js代码"></a>js代码</h3><pre><code>//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) &#123;
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement(&quot;style&quot;),
    tid;

    function refreshRem() &#123;
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width&gt;maxWidth &amp;&amp; (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = &#39;html&#123;font-size:&#39; + rem + &#39;px;&#125;&#39;;
    &#125;

    if (docEl.firstElementChild) &#123;
        docEl.firstElementChild.appendChild(remStyle);
    &#125; else &#123;
        var wrap = doc.createElement(&quot;div&quot;);
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    &#125;
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener(&quot;resize&quot;, function() &#123;
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    &#125;, false);

    win.addEventListener(&quot;pageshow&quot;, function(e) &#123;
        if (e.persisted) &#123; // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        &#125;
    &#125;, false);

    if (doc.readyState === &quot;complete&quot;) &#123;
        doc.body.style.fontSize = &quot;16px&quot;;
    &#125; else &#123;
        doc.addEventListener(&quot;DOMContentLoaded&quot;, function(e) &#123;
            doc.body.style.fontSize = &quot;16px&quot;;
        &#125;, false);
    &#125;
&#125;)(750, 750);</code></pre>
<h3 id="使用方法："><a href="#使用方法：" class="headerlink" title="使用方法："></a>使用方法：</h3><h4 id="1-复制上面这段代码到你的页面的头部的script标签的最前面。"><a href="#1-复制上面这段代码到你的页面的头部的script标签的最前面。" class="headerlink" title="1.复制上面这段代码到你的页面的头部的script标签的最前面。"></a>1.复制上面这段代码到你的页面的头部的script标签的最前面。</h4><h4 id="2-根据设计稿大小，调整里面的最后两个参数值。"><a href="#2-根据设计稿大小，调整里面的最后两个参数值。" class="headerlink" title="2.根据设计稿大小，调整里面的最后两个参数值。"></a>2.根据设计稿大小，调整里面的最后两个参数值。</h4><h4 id="3-使用1rem-100px转换你的设计稿的像素，例如设计稿上某个块是100px300px-换算成rem则为1rem3rem。"><a href="#3-使用1rem-100px转换你的设计稿的像素，例如设计稿上某个块是100px300px-换算成rem则为1rem3rem。" class="headerlink" title="3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px300px,换算成rem则为1rem3rem。"></a>3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px<em>300px,换算成rem则为1rem</em>3rem。</h4><p>该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。</p>
<p>假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}</p>
<h3 id="基本的HTML模板"><a href="#基本的HTML模板" class="headerlink" title="基本的HTML模板"></a>基本的HTML模板</h3><p>你也可以直接复制下面这个基础的HTML模板。</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot; name=&quot;viewport&quot;&gt;
&lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot;&gt;
&lt;meta content=&quot;black&quot; name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;
&lt;meta content=&quot;telephone=no&quot; name=&quot;format-detection&quot;&gt;
&lt;meta content=&quot;email=no&quot; name=&quot;format-detection&quot;&gt;
&lt;meta name=&quot;description&quot; content=&quot;不超过150个字符&quot;/&gt;
&lt;meta name=&quot;keywords&quot; content=&quot;&quot;/&gt;
&lt;meta content=&quot;caibaojian&quot; name=&quot;author&quot;/&gt;
&lt;title&gt;前端开发博客&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;base.css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//引入该flexible.min.js
!function(e,t)&#123;function n()&#123;var n=l.getBoundingClientRect().width;t=t||540,n&gt;t&amp;&amp;(n=t);var i=100*n/e;r.innerHTML=&quot;html&#123;font-size:&quot;+i+&quot;px;&#125;&quot;&#125;var i,d=document,o=window,l=d.documentElement,r=document.createElement(&quot;style&quot;);if(l.firstElementChild)l.firstElementChild.appendChild(r);else&#123;var a=d.createElement(&quot;div&quot;);a.appendChild(r),d.write(a.innerHTML),a=null&#125;n(),o.addEventListener(&quot;resize&quot;,function()&#123;clearTimeout(i),i=setTimeout(n,300)&#125;,!1),o.addEventListener(&quot;pageshow&quot;,function(e)&#123;e.persisted&amp;&amp;(clearTimeout(i),i=setTimeout(n,300))&#125;,!1),&quot;complete&quot;===d.readyState?d.body.style.fontSize=&quot;16px&quot;:d.addEventListener(&quot;DOMContentLoaded&quot;,function(e)&#123;d.body.style.fontSize=&quot;16px&quot;&#125;,!1)&#125;(750,750);
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;!-- 正文 --&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="base-css"><a href="#base-css" class="headerlink" title="base.css"></a>base.css</h3><pre><code>body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td&#123;margin:0;padding:0;&#125;
ul,ol&#123;list-style:none;&#125;
a&#123;text-decoration:none;&#125;
html&#123;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;&#125;
body&#123;line-height:1.5; font-size:14px;&#125;
body,button,input,select,textarea&#123;font-family:&#39;helvetica neue&#39;,tahoma,&#39;hiragino sans gb&#39;,stheiti,&#39;wenquanyi micro hei&#39;,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;&#125;
b,strong&#123;font-weight:bold;&#125;
i,em&#123;font-style:normal;&#125;
table&#123;border-collapse:collapse;border-spacing:0;&#125;
table th,table td&#123;border:1px solid #ddd;padding:5px;&#125;
table th&#123;font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;&#125;
img&#123;border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;&#125;
button,input,select,textarea&#123;font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;&#125;
button,html input[type=&quot;button&quot;],input[type=&quot;reset&quot;],input[type=&quot;submit&quot;]&#123;-webkit-appearance:button;cursor:pointer;&#125;
button[disabled],input[disabled]&#123;cursor:default;&#125;
input[type=&quot;checkbox&quot;],input[type=&quot;radio&quot;]&#123;box-sizing:border-box;padding:0;&#125;
input[type=&quot;search&quot;]&#123;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;&#125;
input[type=&quot;search&quot;]::-webkit-search-decoration&#123;-webkit-appearance:none;&#125;
input:focus&#123;outline:none;&#125;
select[size],select[multiple],select[size][multiple]&#123;border:1px solid #AAA;padding:0;&#125;
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary&#123;display:block;&#125;
audio,canvas,video,progress&#123;display:inline-block;&#125;
body&#123;background:#fff;&#125;
input::-webkit-input-speech-button &#123;display: none&#125;
button,input,textarea&#123;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&#125;</code></pre>
<h3 id="再次强调一下："><a href="#再次强调一下：" class="headerlink" title="再次强调一下："></a>再次强调一下：</h3><p>需要根据你的设计稿的大小来调整脚本最后的两个参数。</p>
<pre><code>&#125;)(750, 750);</code></pre>
<p>第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整</p>
<p>第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。</p>
<p>文章转自-链接:<a target="_blank" rel="noopener" href="http://caibaojian.com/simple-flexible.html">http://caibaojian.com/simple-flexible.html</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/03/12/2017-03-12-Rem%E8%87%AA%E9%80%82%E5%BA%94js-%E4%BC%98%E5%8C%96flexible.js/" data-id="ckds6fxa5000dk8qch6yaeg9s" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-2017-03-12-jsonp跨域" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/03/12/2017-03-12-jsonp%E8%B7%A8%E5%9F%9F/" class="article-date">
  <time datetime="2017-03-11T16:00:00.000Z" itemprop="datePublished">2017-03-12</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/myblog/2017/03/12/2017-03-12-jsonp%E8%B7%A8%E5%9F%9F/">jsonp跨域请求</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p> 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。之所以会产生跨域这个问题呢，其实也很容易想明白，要是随便引用外部文件，不同标签下的页面引用类似的彼此的文件，浏览器很容易懵逼的，安全也得不到保障了就。什么事，都是安全第一嘛。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。下面是具体的跨域情况详解：</p>
<p>URL                           说明                    是否允许通信</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/a.js">http://www.a.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/b.js">http://www.a.com/b.js</a>         同一域名下               允许</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/lab/a.js">http://www.a.com/lab/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/script/b.js">http://www.a.com/script/b.js</a>  同一域名下不同文件夹      允许</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com:8000/a.js">http://www.a.com:8000/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/b.js">http://www.a.com/b.js</a>         同一域名，不同端口        不允许</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/a.js">http://www.a.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="https://www.a.com/b.js">https://www.a.com/b.js</a>        同一域名，不同协议        不允许</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/a.js">http://www.a.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://70.32.92.74/b.js">http://70.32.92.74/b.js</a>       域名和域名对应ip         不允许</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/a.js">http://www.a.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://script.a.com/b.js">http://script.a.com/b.js</a>      主域相同，子域不同        不允许（cookie这种情况下也不允许访问）</p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/a.js">http://www.a.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://a.com/b.js">http://a.com/b.js</a>             同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）</p>
<p><a target="_blank" rel="noopener" href="http://www.cnblogs.com/a.js">http://www.cnblogs.com/a.js</a></p>
<p><a target="_blank" rel="noopener" href="http://www.a.com/b.js">http://www.a.com/b.js</a>         不同域名                  不允许</p>
<h3 id="跨域请求有6种"><a href="#跨域请求有6种" class="headerlink" title="跨域请求有6种"></a>跨域请求有6种</h3><p>1.通过document.domain跨域</p>
<p>2.通过location.hash跨域</p>
<p>3.通过HTML5的postMessage方法跨域</p>
<p>4.通过jsonp跨域</p>
<p>5.通过CORS跨域</p>
<p>6.通过window.name跨域</p>
<h4 id="我们详细说第4，5种，jsonp跨域和CORS跨域。"><a href="#我们详细说第4，5种，jsonp跨域和CORS跨域。" class="headerlink" title="我们详细说第4，5种，jsonp跨域和CORS跨域。"></a>我们详细说第4，5种，jsonp跨域和CORS跨域。</h4><h3 id="通过jsonp跨域"><a href="#通过jsonp跨域" class="headerlink" title="通过jsonp跨域"></a>通过jsonp跨域</h3><p>这几种都是双向通信的，即两个iframe，页面与iframe或是页面与页面之间的，下面说几种单项跨域的（一般用来获取数据），因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用。</p>
<p>比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是<a target="_blank" rel="noopener" href="http://damonare.cn/data.php,%E9%82%A3%E4%B9%88a.html%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81%E5%B0%B1%E5%8F%AF%E4%BB%A5%E8%BF%99%E6%A0%B7%EF%BC%9A">http://damonare.cn/data.php,那么a.html中的代码就可以这样：</a></p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    function dosomething(jsondata)&#123;
        //处理获得的json数据
    &#125;
&lt;/script&gt;
&lt;script src=&quot;http://example.com/data.php?callback=dosomething&quot;&gt;&lt;/script&gt;</code></pre>
<p>我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。</p>
<p>因为是当做一个js文件来引入的，所以<a target="_blank" rel="noopener" href="http://damonare.cn/data.php%E8%BF%94%E5%9B%9E%E7%9A%84%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E8%83%BD%E6%89%A7%E8%A1%8C%E7%9A%84js%E6%96%87%E4%BB%B6%EF%BC%8C%E6%89%80%E4%BB%A5%E8%BF%99%E4%B8%AA%E9%A1%B5%E9%9D%A2%E7%9A%84php%E4%BB%A3%E7%A0%81%E5%8F%AF%E8%83%BD%E6%98%AF%E8%BF%99%E6%A0%B7%E7%9A%84(%E4%B8%80%E5%AE%9A%E8%A6%81%E5%92%8C%E5%90%8E%E7%AB%AF%E7%BA%A6%E5%AE%9A%E5%A5%BD%E5%93%A6)">http://damonare.cn/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的(一定要和后端约定好哦)</a>:</p>
<pre><code>&lt;?php
$callback = $_GET[&#39;callback&#39;];//得到回调函数名
$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?&gt;</code></pre>
<p>最终，输出结果为：</p>
<pre><code>dosomething([‘a’,’b’,’c’]);</code></pre>
<p>如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。</p>
   <script type="text/javascript">
       $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
           //处理获得的json数据
       });
   </script>

<p>jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。</p>
<h3 id="JSONP的优缺点"><a href="#JSONP的优缺点" class="headerlink" title="JSONP的优缺点"></a>JSONP的优缺点</h3><p>JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。</p>
<p>JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。</p>
<h3 id="CORS跨域"><a href="#CORS跨域" class="headerlink" title="CORS跨域"></a>CORS跨域</h3><p>CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。</p>
<p>因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。</p>
<p>平时的ajax请求可能是这样的:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var xhr = new XMLHttpRequest();
    xhr.open(&quot;POST&quot;, &quot;/damonare&quot;,true);
    xhr.send();
&lt;/script&gt;</code></pre>
<p>以上damonare部分是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var xhr = new XMLHttpRequest();
    xhr.open(&quot;￼GET&quot;, &quot;http://segmentfault.com/u/trigkit4/&quot;,true);
    xhr.send();
&lt;/script&gt;</code></pre>
<p>代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。</p>
<p>服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。关于CORS更多了解可以看下阮一峰老师的这一篇文章：<a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/04/cors.html">跨域资源共享 CORS 详解</a></p>
<h4 id="CORS和JSONP对比"><a href="#CORS和JSONP对比" class="headerlink" title="CORS和JSONP对比"></a>CORS和JSONP对比</h4><p>JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。</p>
<p>使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。</p>
<p>JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。</p>
<p>CORS与JSONP相比，无疑更为先进、方便和可靠。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/03/12/2017-03-12-jsonp%E8%B7%A8%E5%9F%9F/" data-id="ckds6fxa7000fk8qc94uvhep8" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="/myblog/page/2/">2</a><a class="extend next" rel="next" href="/myblog/page/2/">Next &amp;raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/myblog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/myblog/tags/js/" style="font-size: 10px;">js</a> <a href="/myblog/tags/rem/" style="font-size: 16.67px;">rem</a> <a href="/myblog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 10px;">其他</a> <a href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 13.33px;">博客</a> <a href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13.33px;">性能优化</a> <a href="/myblog/tags/%E6%A1%86%E6%9E%B6/" style="font-size: 10px;">框架</a> <a href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 13.33px;">移动端</a> <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" style="font-size: 10px;">跨域请求</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/10/">October 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/09/">September 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/08/">August 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2015/08/">August 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">(no title)</a>
          </li>
        
          <li>
            <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
          </li>
        
          <li>
            <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jason<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/myblog/" class="mobile-nav-link">Home</a>
  
    <a href="/myblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/myblog/fancybox/jquery.fancybox.css">

  
<script src="/myblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/myblog/js/script.js"></script>




  </div>
</body>
</html>